<template>
	<view class="content">
		<u-navbar title="" border safeAreaInsetTop @rightClick="rightClick" :autoBack="true">
			<view class="navLeft" slot="left">
			</view>
			<view class="navCenter" slot="center">
				<image src="/static/index/navLogo.png"></image>
			</view>
			<view class="navRight" slot="right">
				<image src="/static/index/topRIght.png"></image>
			</view>
		</u-navbar>
		<!-- 轮播图 -->
		<view class="top">
			<swiper class="swiper" circular style="height: 379rpx;">
				<swiper-item v-for="item,index in banner" :key="index">
					<image class="imgBanner" :src="item.picture"></image>
				</swiper-item>
			</swiper>
			<view class="indexBtn lockBtn" @click.stop="lock">PDF雷达锁</view>
		</view>
		<!-- 困扰 -->
		<view class="perplex">
			<view class="topic">
				<image src="../../static/index/fengeL.png"></image>
				<view class="topicText">你是否经常有这样的困扰</view>
				<image src="../../static/index/fengeR.png"></image>
			</view>
			<view class="perplexList">
				<view class="perplexBox" v-for="item,index in perplex" :key="index">
					<view class="perplexTitle">{{item.title}}</view>
					<image :src="item.picture"></image>
					<view class="perplexContent">{{item.sub_title}}</view>
				</view>
			</view>
		</view>
		<!-- 雷达锁 -->
		<view class="lock">
			<view class="topic">
				<image src="../../static/index/fengeL.png"></image>
				<view class="topicText">用PDF雷达锁</view>
				<image src="../../static/index/fengeR.png"></image>
			</view>
			<view class="lockContent">
				<image class="lockBgImg" src="/static/index/box4.png"></image>
				<view class="lockList" v-for="item,index in lockContent" :key="index">
					<image style="margin-top: 7rpx;" src="/static/index/leidaIcon.png"></image>
					<view class="lockText">{{item.title}}</view>
				</view>
			</view>
		</view>
		<view class="btn">
			<view class="indexBtn" @click.stop="lock">PDF雷达锁</view>
		</view>
		<!-- PDF加密 -->
		<view class="perplex">
			<view class="topic">
				<image src="../../static/index/fengeL.png"></image>
				<view class="topicText">如何给PDF加密</view>
				<image src="../../static/index/fengeR.png"></image>
			</view>
			<view class="encryption">
				<view class="lockList" v-for="item,index in encryption" :key="index">
					<view class="tags">{{index + 1}}</view>
					<view class="lockText">{{item.title}}</view>
				</view>
			</view>
		</view>
		<view class="btn">
			<view class="indexBtn" @click.stop="lock">PDF雷达锁</view>
		</view>
		<view class="article">
			<view v-for="item,index in article" :key="index">
				<view class="box" v-if="index % 2 ==0">
					<image class="img1" :src="item.picture"></image>
					<view class="right" style="margin: 10rpx;">
						<view class="title">{{item.title}}</view>
						<view class="boxContent">{{item.sub_title}}</view>
					</view>
				</view>
				<view class="box" v-else>
					<view class="right" style="margin-left: 10rpx;">
						<view class="title">{{item.title}}</view>
						<view class="boxContent">{{item.sub_title}}</view>
					</view>
					<image class="img1" :src="item.picture"></image>
				</view>
			</view>
		</view>
		<footBar></footBar>
	</view>
</template>

<script>
	import foorBar from "@/components/footBar/footBar.vue"
	export default {
		components: {
			foorBar
		},
		data() {
			return {
				banner: [],
				perplex: [],
				lockContent: [],
				encryption: [],
				article: []
			}
		},
		onLoad() {

		},
		onShow() {
			this.getList()
		},
		methods: {
			lock(){
				uni.switchTab({
					url:'/pages/lock/lock'
				})
			},
			getList() {
				let data = {}
				this.api.get('api/content/infomation', data).then(res => {
					if (res.code == 200) {
						this.banner = res.data.banner_data
						this.perplex = res.data.workplace_troubles
						this.lockContent = res.data.characteristic
						this.encryption = res.data.encryption_method
						this.article = res.data.advantage

					}
				})
			},
			rightClick() {
				uni.switchTab({
					url: '/pages/user/user'
				})
			},
			leftClick() {
				console.log('leftClick');
			}
		}
	}
</script>

<style lang="scss">
	.navLeft image {
		width: 48rpx;
		height: 48rpx;
	}

	.navRight image {
		width: 33rpx;
		height: 33rpx;
	}

	.navCenter image {
		width: 220rpx;
		height: 44rpx;
	}

	.top {
		height: 379rpx;
		position: relative;
		left: 0;
		right: 0;
		text-align: center;
	}

	.imgBanner {
		width: 100%;
		height: 379rpx;
	}

	.lockBtn {
		position: absolute;
		bottom: 80rpx;
		left: 0;
		right: 0;
		text-align: center;
		margin: 0 260rpx;
		z-index: 9;
	}

	.perplex {
		margin: 30rpx 10rpx 30rpx 30rpx;
	}

	.topic {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 40rpx 0;
	}

	.topic image {
		width: 92rpx;
		height: 11rpx;
	}

	.topicText {
		font-size: 36rpx;
		color: #333;
		font-weight: 700;
		margin: 0 20rpx;
	}

	.perplexList {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.perplexBox {
		background: #fff;
		box-shadow: 0rpx 0rpx 10rpx 10rpx rgba(255, 188, 184, .2);
		padding: 30rpx 20rpx;
		border-radius: 5rpx;
		text-align: center;
		width: 244rpx;
		height: 440rpx;
		margin-right: 20rpx;
	}

	.perplexBox image {
		width: 168rpx;
		height: 153rpx;
	}

	.perplexTitle {
		font-size: 30rpx;
		font-weight: 700;
		color: #101010;
		margin-bottom: 10rpx;
	}

	.perplexContent {
		font-size: 26rpx;
		color: #101010;
		margin-top: 10rpx;
	}

	.lockContent {
		position: relative;
		left: 0;
		right: 0;
		margin: 30rpx;
	}

	.lockBgImg {
		position: absolute;
		right: 0rpx;
		bottom: 0rpx;
		width: 327rpx;
		height: 229rpx;
		z-index: -1;
	}

	.lockList {
		display: flex;
		font-size: 26rpx;
		color: #282828;
		margin: 30rpx 0;
	}

	.lockList image {
		width: 26rpx;
		height: 26rpx;
		margin-right: 20rpx;
	}

	.lockText {
		width: 650rpx;
	}

	.btn {
		margin: 40rpx 30rpx;
		padding: 0 220rpx;
	}

	.encryption {
		background: #fff;
		box-shadow: 10rpx 0rpx 10rpx 10rpx rgba(255, 188, 184, .5);
		padding: 30rpx 20rpx;
		border-radius: 5rpx;
	}

	.tags {
		background: #FE0000;
		border-radius: 50%;
		width: 38rpx;
		height: 38rpx;
		color: #fff;
		font-size: 22rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 20rpx;
	}

	.article {
		margin: 30rpx;
	}

	.box {
		display: flex;
		align-items: center;
		background: #F5F5F5;
		margin: 20rpx 0;
	}

	.img1 {
		width: 344rpx;
		height: 283rpx;
	}

	.img2 {
		margin-left: 6rpx;
		width: 344rpx;
		height: 283rpx;
	}

	.right {
		font-size: 26rpx;
	}

	.title {
		font-size: 30rpx;
		font-weight: 700;
		margin-bottom: 15rpx;
	}

	.boxContent {
		width: 336rpx;
	}
</style>